import React, { useCallback } from 'react';
import { useDispatch } from 'umi';
import { Form, Input, Button, Image } from 'antd-mobile';
import styles from './index.less';

const Login: React.FC = (props) => {
  const dispatch = useDispatch();

  const handleLogin = useCallback((value) => {
    dispatch({
      type: 'login/getLogin',
      payload: value,
    });
  }, []);

  return (
    <div className={styles.loginContent}>
      <Image src={require('@/assects/logo.png')} className={styles.logo} />
      <Form
        className={styles.formCenter}
        layout="horizontal"
        onFinish={handleLogin}
        footer={
          <Button block type="submit" color="primary" size="large">
            登录
          </Button>
        }
      >
        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: '邮箱不能为空!' }]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
